import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import menuList from '../../config/menuConfig';

import {
  Form,
  Input,
  Tree
} from 'antd';


export default class SetRoleAuth extends PureComponent {
  static propTypes = {
    role: PropTypes.object
  }

  state = {
    treeData: [
      {
        title: '系统权限',
        key: 'all',
        children: []
      }
    ],
    checkedKeys: []
  }

  constructor(props) {
    super(props)

    // 根据传入角色的menus生成初始状态
    const { menus } = this.props.role
    this.state = {
      checkedKeys: menus
    }
  }

  onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
    this.setState({ checkedKeys });
  };

  getMenus = () => {
    return this.state.checkedKeys
  }

  generateAuthList = () => {
    this.setState({
      treeData: [
        {
          title: '系统权限',
          key: 'all',
          children: menuList
        }
      ]
    })
  }

  UNSAFE_componentWillMount () {
    this.generateAuthList()
  }

  render () {
    const { role } = this.props
    const { treeData, checkedKeys } = this.state
    return (
      <Form>
        <Form.Item
          label="角色名称"
          name="roleName"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 12 }}
        >
          <Input disabled placeholder={role.name} />
        </Form.Item>
        <Tree
          checkable
          defaultExpandAll={true}
          checkedKeys={checkedKeys}
          onCheck={this.onCheck}
          treeData={treeData}
        />
      </Form>
    )
  }
}
